<template>
	<view class="content">
		<view class="tabs">
			<view class="navTab">
				<block v-for="(item,index) in scrollList" :key="index">
					<view class="tab-item" :class="{'at-tab-item':current == index}"
						@click="tabChange(index,item.value)">
						{{item.name}}
					</view>
				</block>
				<view class="tab-bottom" :style="[{left:left+'px'},{width:width+'px'}]">
					<view class="xian" :style="{width:width/5+'px'}"></view>
				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<block v-for="(item,index) in oList" :key="index">
				<view class="list-item" @click="goUser(item.id)">
					<view class="head">
						<text class="t1">订单号：{{item.order_sn}}</text>
						<text class="t2">{{setStatus(item.status)}}</text>
					</view>
					<view class="order-user">
						<view class="user tn-flex">
							<view class="user-left">
								<image :src="item.game_img" mode=""></image>
							</view>
							<view class="user-right tn-flex">
								<view class="name">{{item.nickname}}</view>
								<view class="tag">{{item.game_name}}{{item.num}}{{item.unit}}</view>
								<view class="price">
									<text class="p1">{{item.price}}</text>
									<text class="p2">海豚币</text>
								</view>
							</view>
						</view>
						<view class="foot tn-flex">
							<view class="btn2" v-if="item.status == 1" @click.stop="cancelOrder(item.id)">取消订单</view>
							<view class="btn1" v-if="item.status == 1" @click.stop="pay(item.id)">付款</view>
							<view class="btn2" v-if="item.status == 2">查看详情</view>
							<view class="btn1" v-if="item.status == 4" @click.stop="success(item.id)">订单完成</view>
							<view class="btn2" v-if="item.status == 5" @click.stop="goEvaluate(item.id)">去评价</view>
							<view class="btn1" v-if="item.status == 5 || item.status == 6"
								@click.stop="recurOrder(item.id)">再来一单</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<w-load-more ref="wLoadMore"></w-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollList: [{
						name: '全部',
						value: 0
					},
					{
						name: '待付款',
						value: 1
					},
					{
						name: '待服务',
						value: 2
					},
					{
						name: '进行中',
						value: 4
					},
					{
						name: '已完成',
						value: 5
					}
				],
				current: 0,
				width: 0,
				left: 0,
				itemNode: '',
				status: 0,
				page: 1,
				oList: []
			}
		},
		onReady() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.tab-item').boundingClientRect(data => {
					this.itemNode = data
					this.width = data[this.current].width
				}).exec();
			}, 500)

		},
		onLoad() {
			this.getList(1)
			uni.$off('updateMyOrder')
			uni.$on('updateMyOrder',() =>{
				console.log('更新了')
				this.page = 1
				this.getList()
			})
		},
		onReachBottom() {
			if (this.oList.length < 20) return
			this.page++
			this.$refs['wLoadMore'].setLoading()
			this.getList()
		},
		computed: {
			setStatus() {
				return function(val) {
					return val == 1 ? '待付款' : val == 2 ? '待服务' : val == 3 ? '已拒绝' : val == 4 ? '进行中' : val == 5 ?
						'待评价' : val == 6 ? '已完成' : '取消订单'
				}
			}
		},
		methods: {
			async getList(loading) {
				try {
					let result = await this.$request({
						loading,
						method: 'post',
						url: '/api/play_order/user_order',
						data: {
							status: this.status,
							page: this.page
						}
					})
					let data = result.data.data.data
					console.log(data)
					if (this.page == 1) {
						this.oList = data
					} else {
						this.oList = this.oList.concat(data)
						this.$refs['wLoadMore'].setNomore()
						if (data.length == 0) {
							this.page--
						}
					}
				} catch (e) {
					this.msg(e.data.msg)

				}

			},
			// 取消订单
			async cancelOrder(play_order_id) {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_order/cancel',
						data: {
							play_order_id
						}
					})
					this.page = 1
					this.getList()
					this.msg(result.data.msg)
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			// 去付款
			async pay(play_order_id) {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_order/pay',
						data: {
							play_order_id
						}
					})
					this.page = 1
					this.getList()
					this.msg(result.data.msg)
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			async success(play_order_id) {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_order/user_finish_order',
						data: {
							play_order_id
						}
					})
					this.page = 1
					this.getList()
					this.msg(result.data.msg)
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			// 再来一单
			async recurOrder(play_order_id) {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/play_order/once',
						data: {
							play_order_id
						}
					})
					this.page = 1
					this.getList()
					this.msg(result.data.msg)
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			goEvaluate(id){
				uni.navigateTo({
					url:'/playcenterPage/evaluate?id='+id
				})
			},
			tabChange(index, value) {
				this.current = index
				this.left = this.itemNode[index].left
				this.status = value
				this.page = 1
				this.getList(1)
			},
			goUser(id) {
				uni.navigateTo({
					url: "/playcenterPage/my-p-w-user?id="+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.tabs {
			position: sticky;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			z-index: 10;

		}

		.navTab {
			display: flex;
			align-items: center;
			height: 105rpx;
			position: relative;
			background-color: #ffffff;

			.tab-item {
				width: 150rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}

			.at-tab-item {
				font-size: 36rpx;
				color: $uni-text-color;

			}

			.tab-bottom {
				position: absolute;
				bottom: 12rpx;
				transition: left .2s linear;
				display: flex;
				justify-content: center;

				.xian {
					height: 8rpx;
          background: linear-gradient(90deg, #080808 0%, #080808 100%);
					border-radius: 60rpx;
				}
			}
		}

		.order-list {
			padding: 32rpx;

			.list-item {
				background-color: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 24rpx;

				.head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 88rpx;
					padding: 0 24rpx;
					border-bottom: 1px solid #efefef;

					.t1 {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					.t2 {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333ad;
					}
				}

				.order-user {
					padding: 24rpx;

					.user {
						.user-left {
							image {
								width: 200rpx;
								height: 200rpx;
								border-radius: 10rpx;
							}
						}

						.user-right {
							padding-left: 24rpx;
							flex-direction: column;

							.name {
								font-size: 30rpx;
								font-weight: bold;
								color: #333333;
								margin-bottom: 16rpx;
							}

							.tag {
								font-size: 26rpx;
								font-weight: 400;
								color: #333333;
								flex: 1;

							}

							.price {
								color: #f75c53;

								.p1 {
									font-size: 40rpx;
								}

								.p2 {
									font-size: 24rpx;
								}
							}
						}
					}

					.foot {
						align-items: center;
						justify-content: flex-end;
						margin-top: 24rpx;

						.t1 {
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
						}

						.btn1 {
							width: 160rpx;
							height: 60rpx;
							border-radius: 30rpx;
							background: #9D5EF4;
							font-size: 28rpx;
							font-weight: 400;
							color: #FFFFFF;
							text-align: center;
							line-height: 60rpx;
							margin: 0 0 0 24rpx;
						}

						.btn2 {
							width: 160rpx;
							height: 60rpx;
							border-radius: 30rpx;
							background: rgba(157, 94, 244, 0);
							border: 1px solid #9D5EF4;
							font-size: 28rpx;
							font-weight: 400;
							color: #9D5EF4;
							line-height: 60rpx;
							text-align: center;
						}
					}
				}
			}

			.list-item:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>
